/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-17 19:09:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-17 15:34:11
 */
import React, {useEffect, useState} from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';

const Line: React.FC<any> = (props) => {
    const [chartOption, setChartOption] = useState({});
    const {baseFontSize = 1} = props;
    const defaultOption = {
        color: ['#30C8FF'],
        title: {
            textStyle: {
                fontSize: 14 * baseFontSize,
                color: '#FFFFFF',
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
        },
        textStyle: {
            fontFamily: '微软雅黑',
            fontSize: 14 * baseFontSize,
            fontWeight: 400,
        },
        grid: {
            bottom: 0,
            top: 50 * baseFontSize,
            right: '1%',
            left: 0,
            containLabel: true,
        },
        legend: {
            left: 'right',
            itemHeight: 3 * baseFontSize,
            lineStyle: {
                width: 6 * baseFontSize,
            },
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12 * baseFontSize
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(254, 254, 254, 0.1)',
                },
            },
            axisLabel: {
                fontSize: 14 * baseFontSize,
                color: '#FFFFFF',
            },
            nameTextStyle: {
                fontFamily: '微软雅黑',
                color: '#fff',
                fontSize: 14 * baseFontSize,
                padding: [0, 0, 10, 0],
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255, 0.1)',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 2 * baseFontSize,
                    color: 'rgba(255, 255, 255, 0.1)',
                },
            },
            axisLabel: {
                fontSize: 14 * baseFontSize,
                color: '#FFFFFF',
            },
            nameTextStyle: {
                fontFamily: '微软雅黑',
                color: '#fff',
                fontSize: 14 * baseFontSize,
                padding: [0, 0, 10, 0],
            },
        },
    };
    const defaultSeries = {
        showSymbol: false,
        smooth: true,
        label: {
            fontSize: 14 * baseFontSize,
            color: '#FFFFFF',
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(31, 203, 246,0.6)',
                },
                {
                    offset: 1,
                    color: 'rgba(31, 203, 246,0.1)',
                },
            ]),
        },
    };
    const resolveData = () => {
        let series = [];
        let option: any = {};
        const defaultOptionCopy = cloneDeep(defaultOption);
        if (props.series && props.series instanceof Array) {
            series = props.series.map((item: any) => merge({}, defaultSeries, item));
            option = merge({}, defaultOptionCopy, props.option || {});
        }
        option.series = series;
        setChartOption(option);
    };

    const getOption = () => {
        return cloneDeep(chartOption);
    };

    useEffect(() => {
        resolveData();
    }, [props.loading]);

    return (
        <ReactECharts echarts={echarts} {...props} option={getOption()} notMerge={true}/>
    );
};

export default Line;
